﻿@page "/components/datagrid"
@page "/components/data-grid"
@inherits AppComponentBase
@using Demo.Shared.Dtos.DataGridDemo

<PageOutlet Url="components/datagrid"
            Title="DataGrid"
            Description="datagrid component of the bit BlazorUI components" />

<DemoPage Name="DataGrid"
          Description="BitDataGrid is a robust way to display an information-rich collection of items, and allow people to sort, and filter the content. Use a data-grid when information density is critical."
          Parameters="componentParameters"
          SubClasses="componentSubClasses"
          SubEnums="componentSubEnums"
          GitHubExtrasUrl="DataGrid/BitDataGrid.razor"
          GitHubDemoUrl="Extras/DataGrid/BitDataGridDemo.razor">
    <NotesTemplate>
        <BitText>
            To use this component, you need to install the
            <BitLink Href="https://www.nuget.org/packages/Bit.BlazorUI.Extras" Target="_blank">
                <BitTag Reversed
                        Text="Bit.BlazorUI.Extras"
                        Color="BitColor.SecondaryBackground"
                        IconName="@BitIconName.NavigateExternalInline" />
            </BitLink>
            NuGet package, as described in the Optional steps of the
            <BitLink Href="/getting-started">Getting started</BitLink> page.
        </BitText>
    </NotesTemplate>
    <Examples>
        <DemoExample Title="Basic" RazorCode="@example1RazorCode" CsharpCode="@example1CsharpCode" Id="example1">
            <BitDataGrid Items="@FilteredItems1" Pagination="@pagination1" ResizableColumns>
                <BitDataGridPropertyColumn Property="@(c => c.Name)" Sortable="true" IsDefaultSort="BitDataGridSortDirection.Ascending">
                    <ColumnOptions>
                        <BitSearchBox @bind-Value="typicalSampleNameFilter1"
                                      FixedIcon
                                      Immediate DebounceTime="300"
                                      Placeholder="Search..."
                                      InputHtmlAttributes="@(new Dictionary<string, object> { { "autofocus", true } })" />
                    </ColumnOptions>
                </BitDataGridPropertyColumn>
                <BitDataGridPropertyColumn Property="@(c => c.Medals.Gold)" Sortable="true" />
                <BitDataGridPropertyColumn Property="@(c => c.Medals.Silver)" Sortable="true" />
                <BitDataGridPropertyColumn Property="@(c => c.Medals.Bronze)" Sortable="true" />
                <BitDataGridPropertyColumn Property="@(c => c.Medals.Total)" Sortable="true" />
            </BitDataGrid>
            <BitDataGridPaginator Value="@pagination1" />
        </DemoExample>

        <DemoExample Title="Customized" RazorCode="@example2RazorCode" CsharpCode="@example2CsharpCode" Id="example2">
            <div class="custom-grid">
                <div class="container">
                    <BitDataGrid Items="@FilteredItems2" Pagination="@pagination2" ResizableColumns>
                        <BitDataGridPropertyColumn Property="@(c => c.Name)" IsDefaultSort="BitDataGridSortDirection.Ascending" Sortable="true" Class="wide">
                            <ColumnOptions>
                                <BitSearchBox @bind-Value="typicalSampleNameFilter2"
                                              FixedIcon
                                              Immediate DebounceTime="300"
                                              Placeholder="Search on Name"
                                              InputHtmlAttributes="@(new Dictionary<string, object> { { "autofocus", true } })" />
                            </ColumnOptions>
                        </BitDataGridPropertyColumn>
                        <BitDataGridTemplateColumn Title="Flag" Align="BitDataGridAlign.Center">
                            <img class="flag" src="https://flagsapi.com/@(context.Code)/shiny/32.png" loading="lazy" alt="@(context.Code)" />
                        </BitDataGridTemplateColumn>
                        <BitDataGridPropertyColumn Property="@(c => c.Medals.Gold)" Sortable="true" />
                        <BitDataGridPropertyColumn Property="@(c => c.Medals.Silver)" Sortable="true" />
                        <BitDataGridPropertyColumn Property="@(c => c.Medals.Bronze)" Sortable="true" />
                        <BitDataGridTemplateColumn Title="Action" Align="BitDataGridAlign.Center">
                            <BitButton Variant="BitVariant.Text" IconName="@BitIconName.Edit" Title="Edit" />
                            <BitButton Variant="BitVariant.Text" IconName="@BitIconName.Delete" Title="Delete" />
                        </BitDataGridTemplateColumn>
                    </BitDataGrid>
                </div>
                <BitDataGridPaginator Value="@pagination2" SummaryFormat="@(v => $"Total: {v.TotalItemCount}")">
                    <TextTemplate Context="state">@(state.CurrentPageIndex + 1) / @(state.LastPageIndex + 1)</TextTemplate>
                </BitDataGridPaginator>
            </div>
        </DemoExample>

        <DemoExample Title="Virtualize" RazorCode="@example3RazorCode" CsharpCode="@example3CsharpCode" Id="example3">
            <div class="grid">
                <BitDataGrid @ref="dataGrid" ItemsProvider="@foodRecallProvider" TGridItem="FoodRecall" Virtualize>
                    <BitDataGridPropertyColumn Property="@(c => c.EventId)" />
                    <BitDataGridPropertyColumn Property="@(c => c.State)" />
                    <BitDataGridPropertyColumn Property="@(c => c.City)" />
                    <BitDataGridPropertyColumn Property="@(c => c.RecallingFirm)" Title="Company" />
                    <BitDataGridPropertyColumn Property="@(c => c.Status)" />
                    <BitDataGridPropertyColumn Property="@(c => c.ReportDate)" Title="Report Date" Sortable="true" />
                </BitDataGrid>
            </div>
            <div class="search-panel">
                <BitSearchBox @bind-Value="VirtualSampleNameFilter"
                              Immediate DebounceTime="300"
                              Placeholder="Search..." />
            </div>
        </DemoExample>

        <DemoExample Title="OData" RazorCode="@example4RazorCode" CsharpCode="@example4CsharpCode" Id="example4">
            <div class="grid">
                <BitDataGrid @ref="productsDataGrid" ItemsProvider="@productsItemsProvider" ItemKey="(p => p.Id)" TGridItem="ProductDto" Virtualize>
                    <BitDataGridPropertyColumn Property="@(p => p.Id)" Sortable="true" IsDefaultSort="BitDataGridSortDirection.Ascending" />
                    <BitDataGridPropertyColumn Property="@(p => p.Name)" Sortable="true" />
                    <BitDataGridPropertyColumn Property="@(p => p.Price)" Sortable="true" />
                </BitDataGrid>
            </div>
            <div class="search-panel">
                <BitSearchBox @bind-Value="ODataSampleNameFilter"
                              Immediate DebounceTime="300"
                              Placeholder="Search on Name" />
            </div>
        </DemoExample>

        <DemoExample Title="LoadingTemplate" RazorCode="@example5RazorCode" CsharpCode="@example5CsharpCode" Id="example5">
            <div class="grid">
                <BitDataGrid @ref="productsDataGrid" ItemsProvider="@productsItemsProvider" ItemKey="(p => p.Id)" TGridItem="ProductDto" Pagination="pagination3">
                    <Columns>
                        <BitDataGridPropertyColumn Property="@(p => p.Id)" Sortable="true" IsDefaultSort="BitDataGridSortDirection.Ascending" />
                        <BitDataGridPropertyColumn Property="@(p => p.Name)" Sortable="true" />
                        <BitDataGridPropertyColumn Property="@(p => p.Price)" Sortable="true" />
                    </Columns>
                    <LoadingTemplate>
                        <BitStack Alignment="BitAlignment.Center" Style="height:185px">
                            <b>Loading items...</b>
                            <BitOrbitingDotsLoading Size="BitSize.Large" />
                        </BitStack>
                    </LoadingTemplate>
                </BitDataGrid>
            </div>
            <BitDataGridPaginator Value="@pagination3" SummaryFormat="@(v => $"Total: {v.TotalItemCount?.ToString("N0")}")">
                <TextTemplate Context="state">@(state.CurrentPageIndex + 1) / @(state.LastPageIndex + 1)</TextTemplate>
            </BitDataGridPaginator>
        </DemoExample>

        <DemoExample Title="Responsive" RazorCode="@example6RazorCode" CsharpCode="@example6CsharpCode" Id="example6">
            <div>
                The BitDataGrid does not have the Responsive feature built-in, 
                but you can achieve some level of responsiveness like what we did in this sample:</div>
            <br />
            <div class="responsive-grid">
                <BitDataGrid Items="@allCountries" Pagination="@pagination6">
                    <BitDataGridPropertyColumn Property="@(c => c.Name)" />
                    <BitDataGridPropertyColumn Property="@(c => c.Medals.Gold)" />
                    <BitDataGridPropertyColumn Property="@(c => c.Medals.Silver)" />
                    <BitDataGridPropertyColumn Property="@(c => c.Medals.Bronze)" />
                    <BitDataGridPropertyColumn Property="@(c => c.Medals.Total)" />
                </BitDataGrid>
                <BitDataGridPaginator Value="@pagination6" />
            </div>
        </DemoExample>

    </Examples>
</DemoPage>
